Top React Libraries — Swipes, Scrolls, and Dropdowns

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

React Swipeable

The React Swipeable package lets us add swipe handlers to our components.

To install it, we run:

npm i react-swipeable

Then we can use it by writing:

import React from "react";
import { useSwipeable } from "react-swipeable";

export default function App() {
  const handlers = useSwipeable({
    onSwiped: eventData => console.log("swiped")
  });
  return (
    <div className="App">
      <div {...handlers}> You can swipe here </div>
    </div>
  );
}

We have the handlers object which has the handlers for swiping.

The object has methods like onSwiped , onSwipedLeft , onSwipedRight , onSwipedUp , onSwipedDown , and onSwiping .

The useSwipeable hook will return those automatically.

All we have to do is pass in an event handler for swiping.

We can also use the Swipeable component.

For instance, we can write:

import React from "react";
import { Swipeable } from "react-swipeable";

export default function App() {
  return (
    <div className="App">
      <Swipeable onSwiped={eventData => console.log("swiped")}>
        You can swipe here!
      </Swipeable>
    </div>
  );
}

to do the same thing.

The eventData has lots of data like x and y coordinates change, velocity, and direction.

rc-dropdown

rc-dropdown is a package that provides with a menu component.

To install it, we can run:

npm i rc-dropdown

Then we can write:

import React from "react";
import Dropdown from "rc-dropdown";
import Menu, { Item as MenuItem, Divider } from "rc-menu";
import "rc-dropdown/assets/index.css";

function onSelect({ key }) {
  console.log(`${key} selected`);
}

function onVisibleChange(visible) {
  console.log(visible);
}

const menu = (
  <Menu onSelect={onSelect}>
    <MenuItem disabled>disabled</MenuItem>
    <MenuItem key="1">foo</MenuItem>
    <Divider />
    <MenuItem key="2">bar</MenuItem>
  </Menu>
);

export default function App() {
  return (
    <div>
      <div style={{ margin: 20 }}>
        <div style={{ height: 100 }} />
        <div>
          <Dropdown
            trigger={["click"]}
            overlay={menu}
            animation="slide-up"
            onVisibleChange={onVisibleChange}
          >
            <button style={{ width: 100 }}>open</button>
          </Dropdown>
        </div>
      </div>
    </div>
  );
}

to use it.

We have the Dropdown component with the dropdown.

It has the trigger prop to specify how to trigger the menu.

overlay has the menu overlay.

onVisibleChange is an event handler function that runs when the menu visibility changes.

The menu is in the menu component, we use the Menu component to create the menu.

MenuItem has the menu item.

Divider has the divider.

Menu takes an onSelect prop that runs when an item is selected.

The package also provides its own CSS to style the menu.

Other features include transition, clicks, and more.

React Waypoint

React Waypoint lets us add a component to watch for scrolling to a given position.

To install it, we run:

npm i react-waypoint

Then we can use it by writing:

import React from "react";
import { Waypoint } from "react-waypoint";

export default function App() {
  const handleWaypointEnter = e => console.log(e);
  const handleWaypointLeave = e => console.log(e);

  return (
    <div>
      <div>
        {Array(1000)
          .fill()
          .map((_, i) => {
            if (i !== 500) {
              return <p key={i}>item {i + 1}</p>;
            }
            return (
              <Waypoint
                key={500}
                onEnter={handleWaypointEnter}
                onLeave={handleWaypointLeave}
              />
            );
          })}
      </div>
    </div>
  );
}

We create an array of p elements.

In the middle of the array, we return the Waypoint component to watch for scrolling to that position.

The onEnter handler runs when we scrolling to the Waypoint and onLeave runs when we scroll away from it.

It takes handlers for onPositionChange , whether to check for horizontal scrolling and more.

Conclusion

React Swipeable lets us handle swipes of a component.

rc-dropdown is a simple dropdown library to let us add them.

React Waypoint is a package that lets us watch for scrolling to a given position.